<script setup lang="ts">
import { useRoute } from 'vue-router'
import { getLogisticsAPI } from '@/services'
import type { Logistics } from '@/types/order'
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'
const route = useRoute()
// 定义数据
const logistics = ref<Logistics>()
// 封装获取数据方法
const getLogisticsDetail = async () => {
  const res = await getLogisticsAPI(route.params.id as string)
  logistics.value = res.data
}

onMounted(getLogisticsDetail)

// 高德地图
// 1.下载 pnpm add @amap/amap-jsapi-loader
// 准备key code
// 2.配置 jsCode

window._AMapSecurityConfig = {
  securityJsCode: '415e917da833efcf2d5b69f4d821784b'
}

// 3.报错 类型“Window & typeof globalThis”上不存在属性 去配置类型声明文件
// 引入文件，准备容器，初始化
onMounted(() => {
  // ... 省略 ...
  AMapLoader.load({
    key: '4eed3d61125c8b9c168fc22414aaef7e',
    version: '2.0'
  })
    .then((AMap) => {
      // 使用 Amap 初始化地图
      const map = new AMap.Map('map', {
        //设置地图容器id
        mapStyle: 'amap://styles/whitesmoke',
        zoom: 20 //初始化地图级别
      })
      AMap.plugin('AMap.Driving', function () {
        var driving = new AMap.Driving({
          map,
          showTraffic: false, //关闭道路路况情况
          hideMarkers: true //关闭途径点的图标
        })

        // 数据至少有两条
        if (
          logistics.value?.logisticsInfo &&
          logistics.value.logisticsInfo.length >= 2
        ) {
          // 起点坐标
          const startLngLat = logistics.value.logisticsInfo[0]
          // 终点坐标
          const endLngLat =
            logistics.value.logisticsInfo[
              logistics.value.logisticsInfo.length - 1
            ]
          driving.search(
            [startLngLat.longitude, startLngLat.latitude],
            [endLngLat.longitude, endLngLat.latitude],
            // 途经点位置
            {
              waypoints: logistics.value.logisticsInfo.map((item) => [
                item.longitude,
                item.latitude
              ])
            },
            function () {
              // 未出错时，result即是对应的路线规划方案
            }
          )
        }
      })
      console.log(AMap)
    })
    .catch((e) => {
      console.log(e)
    })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>配送中</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单派送中 预计{{ logistics?.estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">
            {{ item.content }}
          </p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
        <!-- <van-step v-for="i in 5" :key="i">
          <p class="status">运输中</p>
          <p class="content">在广东深圳公司进行发出扫描</p>
          <p class="time">昨天 10:25</p>
        </van-step>
        <van-step>
          <p class="status">已发货</p>
          <p class="content">卖家已发货</p>
          <p class="time">2022-08-20 10:25</p>
        </van-step> -->
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
